<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import {
  getOnlineSaleInvoiceListApi,
  getInvoiceDetListApi,
  getWaitInvoicingWarehouseListApi,
  findZeroDetListApi,
  rewriteOnlineSaleInvoiceApi,
  syncInvoiceBySoIdApi,
  cleanRewriteRecordApi,
  manualConfirmApi,
  deleteZeroApi,
  syncInvoiceByDateApi
} from "@/api/invoice"
import { dayjs, ElMessage, type FormInstance } from "element-plus"
import { Search, Refresh, Download, RefreshRight } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import { getToken } from "@/utils/cache/cookies"
// import { useRouter } from "vue-router"

// const router = useRouter()

defineOptions({
  // 命名当前组件
  name: "logList"
})

const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const pageData = ref({
  dialogErrorMessageVisible: false,
  dialogDetPage: false,
  // 出库单明细页面
  dialogOutwarehousePage: false,
  dialogZeroPage: false,
  dialogSyncInvoiceVisible: false,
  dialogImportJStVisible: false,
  currentShowErrorMessage: "",
  syncOnlineOrderCode: "",
  onlineSaleOrderCodeList: "",
  // 多选
  multipleSelection: [] as any[],
  // 是否跳过已反写
  skipAlreadyRewrite: true,
  queryEmptyRemark: false,
  // 是否重新反写
  retryRewrite: false,
  invoiceDateRange: "",
  defaultDateRange: [dayjs(new Date()).format("YYYY-MM-DD"), dayjs(new Date()).add(1, "days").format("YYYY-MM-DD")],

  // 同步发票起始时间
  syncStartDate: "",
  importJSTURL: `${import.meta.env.VITE_BASE_API}ocean-wms/wmsJstOutWarehouseOrder/import`,
  importJSTHeaders: { fromRout: "WmsJstOutWarehouseOrder", token: getToken() },

  // 导入0元订单
  importZeroOrderURL: `${import.meta.env.VITE_BASE_API}ocean-wms/wmsOnlineSaleInvoice/zeroOrderImport`,
  importZeroOrderHeaders: { fromRout: "WmsOnlineSaleZeroDet", token: getToken() }
})

console.log(pageData.value.invoiceDateRange)

//#region 查
const tableData = ref<any>([])
const tableDetData = ref<any>([])
const tableDetOutwarehouseData = ref<any>([])
// 0元订单明细
const tableZeroDetData = ref<any>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  onlineSaleOrderCode: "",
  onlineSaleOrderCodeList: [] as any[],
  invoiceSn: "",
  sceneType: 2,
  shopCode: "",
  invoiceDate: "",
  // 默认起始时间
  invoiceDateStart: dayjs(new Date()).format("YYYY-MM-DD"),
  invoiceDateEnd: dayjs(new Date()).format("YYYY-MM-DD"),
  // sap状态
  reStatus: "",
  reRequestTime: "",
  remark: "",
  queryEmptyRemark: false,
  reErrorMsg: "",
  invoiceType: "",
  ifSpecialInvoice: ""
})
const getTableData = () => {
  loading.value = true

  getOnlineSaleInvoiceListApi({
    startPage: paginationData.startPage,
    pageSize: paginationData.pageSize,
    ...searchData
  })
    .then((res) => {
      paginationData.total = res.count
      tableData.value = res.data
      console.log(tableData.value)
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  // console.log(searchData.onlineSaleOrderCodeList)
  const codeList = searchData.onlineSaleOrderCode ? searchData.onlineSaleOrderCode.split("\n") : []

  searchData.invoiceDateStart = pageData.value.invoiceDateRange ? pageData.value.invoiceDateRange[0] : ""
  searchData.invoiceDateEnd = pageData.value.invoiceDateRange ? pageData.value.invoiceDateRange[1] : ""
  searchData.onlineSaleOrderCodeList = codeList
  console.log(searchData)

  paginationData.startPage === 1 ? getTableData() : (paginationData.startPage = 1)
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}

const rowDbclick = (row: any) => {
  console.log(row)
  const jstOutWarehouseOrderCode = row.jstOutWarehouseOrderCode
  // 根据场景场景显示不同内容
  switch (row.sceneType) {
    case 1:
    case 3:
      tableDetOutwarehouseData.value = []
      pageData.value.dialogOutwarehousePage = true
      loading.value = true
      getWaitInvoicingWarehouseListApi({
        startPage: 1,
        pageSize: 9999,
        ifIgnoreOrg: true,
        outWarehouseOrderCode: row.outWarehouseOrderCode
      })
        .then((res) => {
          // 发票类型是4-免费订单类型时，过滤买家支付金额是0或者（买家支付不为0，但商品实际成交金额是0）的商品
          if (row.sceneType === 4) {
            tableDetOutwarehouseData.value = res.data.filter(
              (item: any) => item.buyerPaidamount == 0 || (item.buyerPaidamount != 0 && item.realityDealPrice == 0)
            )
          } else {
            tableDetOutwarehouseData.value = res.data
          }
          console.log(tableData.value)
        })
        .catch(() => {
          tableDetOutwarehouseData.value = []
        })
        .finally(() => {
          loading.value = false
        })
      break

    case 2:
      pageData.value.dialogDetPage = true
      loading.value = true
      getInvoiceDetListApi({
        startPage: 1,
        pageSize: 9999,
        internalInvoiceId: row.internalInvoiceId
      })
        .then((res) => {
          tableDetData.value = res.data
          console.log(tableData.value)
        })
        .catch(() => {
          tableDetData.value = []
        })
        .finally(() => {
          loading.value = false
        })
      break
    // 0元订单
    case 4:
      tableZeroDetData.value = []
      pageData.value.dialogZeroPage = true
      loading.value = true

      findZeroDetListApi({
        jstOutWarehouseOrderCode
      })
        .then((res) => {
          tableZeroDetData.value = res.data
          console.log(tableData.value)
        })
        .catch(() => {
          tableZeroDetData.value = []
        })
        .finally(() => {
          loading.value = false
        })
      break
    default:
      break
  }
}
//#endregion

const handleSelectionChange = (val: any) => {
  pageData.value.multipleSelection = val
  console.log(pageData.value.multipleSelection)
}

//#region 反写sap
const rewriteSAP = () => {
  loading.value = true

  const ids = pageData.value.multipleSelection.map((item) => item.onlineSaleInvoiceId).join(",")
  const skipAlreadyRewrite = pageData.value.skipAlreadyRewrite
  const retryRewrite = pageData.value.retryRewrite
  console.log("ids", ids)
  rewriteOnlineSaleInvoiceApi({ ids, skipAlreadyRewrite, retryRewrite })
    .then((res) => {
      console.log(res)
      getTableData()
    })
    .catch(() => {
      tableDetData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
//#endregion

//#region 反写sap
const cleanRewriteRecord = () => {
  loading.value = true

  const ids = pageData.value.multipleSelection.map((item) => item.onlineSaleInvoiceId).join(",")
  console.log("ids", ids)
  cleanRewriteRecordApi({ ids })
    .then((res) => {
      console.log(res)
      getTableData()
    })
    .catch(() => {
      tableDetData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
//#endregion

//#region 手动确认
const manualConfirm = () => {
  loading.value = true

  const ids = pageData.value.multipleSelection.map((item) => item.onlineSaleInvoiceId).join(",")
  console.log("ids", ids)
  manualConfirmApi({ ids })
    .then((res) => {
      console.log(res)
      getTableData()
    })
    .catch(() => {
      tableDetData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
//#endregion

//#region 批量删除0元订单
const batchDeleteZero = () => {
  loading.value = true
  const ids = pageData.value.multipleSelection.map((item) => item.onlineSaleInvoiceId).join(",")
  console.log("ids", ids)
  deleteZeroApi({ ids })
    .then((res) => {
      console.log(res)
      getTableData()
    })
    .catch(() => {
      tableDetData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
//#endregion

const syncInvoiceClick = () => {
  loading.value = true
  syncInvoiceBySoIdApi({
    soIdList: pageData.value.onlineSaleOrderCodeList
  })
    .then((res) => {
      console.log(res)
    })
    .catch(() => {
      tableDetData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}

const syncInvoiceByDateClick = () => {
  loading.value = true
  syncInvoiceByDateApi({
    syncStartDate: pageData.value.syncStartDate
  })
    .then((res) => {
      console.log(res)
    })
    .catch(() => {
      tableDetData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}

const importJSTProgress = () => {
  loading.value = true
}

const importJSTSuccess = (response: any) => {
  loading.value = false
  console.log(response.data)
  const message = `操作成功：${response.data["操作成功总数"]}\n操作失败：${response.data["操作失败行数"]}`
  ElMessage.success(message)
}
const importJSTError = () => {
  loading.value = false
}

//#region 0原订单导入
const importZeroOrderProgress = () => {
  loading.value = true
}

const importZeroOrderSuccess = (response: any) => {
  loading.value = false
  console.log(response)
  if (response["code"] == "200") {
    const message = `操作成功：${response.data["操作成功总数"]}\n操作失败：${response.data["操作失败行数"]}`
    ElMessage.success(message)
  } else {
    ElMessage.error(response["message"])
  }
}
const importZeroOrderError = () => {
  loading.value = false
  ElMessage.error("导入失败")
}
//#endregion

const clickShowErrorMessage = (row: any) => {
  pageData.value.dialogErrorMessageVisible = true
  pageData.value.currentShowErrorMessage = row.reErrorMsg
}

/** 监听分页参数的变化 */
watch([() => paginationData.startPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="onlineSaleOrderCode" label="线上单号">
          <el-input
            v-model="searchData.onlineSaleOrderCode"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 20 }"
            placeholder="请输入"
          />
        </el-form-item>

        <!-- <el-form-item prop="invoiceDate" label="发票日期">
          <el-date-picker
            v-model="searchData.invoiceDate"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item> -->
        <el-form-item prop="invoiceDate" label="发票日期">
          <el-date-picker
            v-model="pageData.invoiceDateRange"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item prop="shopCode" label="店铺名称">
          <el-select v-model="searchData.shopCode" placeholder="店铺名称" clearable style="width: 200px">
            <el-option key="15122714" label="天猫-FSL照明旗舰店" :value="15122714" />
            <el-option key="15067548" label="拼多多-FSL佛山照明官方旗舰店" :value="15067548" />
            <el-option key="15067569" label="拼多多-FSL佛山照明光源旗舰店" :value="15067569" />
            <el-option key="15081712" label="拼多多-FSL佛山照明电工旗舰店" :value="15081712" />
            <el-option key="15080367" label="快手-佛山照明官方店" :value="15080367" />
            <el-option key="15080383" label="抖音-FSL官方旗舰店" :value="15080383" />
            <el-option key="15080794" label="阿里巴巴" :value="15080794" />
            <el-option key="14655931" label="华为商城-佛山照明官方旗舰店" :value="14655931" />
            <el-option key="15080763" label="微盟-FSL微信商城店" :value="15080763" />
            <el-option key="15080908" label="FSL南粤分享汇" :value="15080908" />
          </el-select>
        </el-form-item>

        <el-form-item prop="reStatus" label="SAP状态">
          <el-select v-model="searchData.reStatus" placeholder="SAP状态" clearable style="width: 200px">
            <el-option key="0" label="未反写" :value="0" />
            <el-option key="2" label="成功" :value="2" />
            <el-option key="3" label="失败" :value="3" />
          </el-select>
        </el-form-item>

        <el-form-item prop="reRequestTime" label="回传日期">
          <el-date-picker
            v-model="searchData.reRequestTime"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>

        <el-form-item prop="reErrorMsg" label="回传错误信息">
          <el-input v-model="searchData.reErrorMsg" placeholder="请输入" />
        </el-form-item>

        <el-form-item prop="remark" label="备注">
          <el-input v-model="searchData.remark" placeholder="请输入" />
        </el-form-item>

        <el-form-item prop="queryEmptyRemark" label="">
          <el-checkbox v-model="searchData.queryEmptyRemark">空备注</el-checkbox>
        </el-form-item>

        <!-- <el-table-column prop="reStatus" width="100" label="SAP状态" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.reStatus == 0" type="info">未反写</el-tag>
              <el-tag v-if="scope.row.reStatus == 2" type="success">成功</el-tag>
              <el-tag v-if="scope.row.reStatus == 3" type="danger">失败</el-tag>
            </template>
          </el-table-column> -->

        <el-form-item prop="invoiceSn" label="发票流水号">
          <el-input v-model="searchData.invoiceSn" placeholder="请输入" />
        </el-form-item>

        <el-form-item prop="invoiceType" label="发票类型">
          <el-select v-model="searchData.invoiceType" placeholder="发票类型" clearable style="width: 150px">
            <el-option key="1" label="蓝票" :value="1" />
            <el-option key="2" label="红票" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item prop="ifSpecialInvoice" label="专票/普票">
          <el-select v-model="searchData.ifSpecialInvoice" placeholder="专票/普票" clearable style="width: 150px">
            <el-option key="1" label="专票" :value="1" />
            <el-option key="0" label="普票" :value="0" />
          </el-select>
        </el-form-item>

        <el-form-item prop="sceneType" label="场景">
          <el-select v-model="searchData.sceneType" placeholder="场景" clearable style="width: 150px">
            <el-option key="1" label="补发订单" :value="1" />
            <el-option key="2" label="发票回传" :value="2" />
            <el-option key="3" label="换货订单" :value="3" />
            <el-option key="4" label="0元订单" :value="4" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
          <el-button type="warning" :icon="Search" @click="pageData.dialogSyncInvoiceVisible = true"
            >同步发票</el-button
          >
          <!-- <el-button type="primary" @click="pageData.dialogImportJStVisible = true">JST出库单导入</el-button> -->
        </el-form-item>

        <br />
        <el-form-item>
          <el-upload
            :action="pageData.importJSTURL"
            accept=".xlsx, .xls"
            :show-file-list="false"
            :headers="pageData.importJSTHeaders"
            :on-progress="importJSTProgress"
            :on-success="importJSTSuccess"
            :on-error="importJSTError"
          >
            <el-button type="primary">JST出库单导入</el-button>
          </el-upload>
        </el-form-item>

        <!-- 0元订单导入 -->
        <el-form-item>
          <el-upload
            :action="pageData.importZeroOrderURL"
            accept=".xlsx, .xls"
            :show-file-list="false"
            :headers="pageData.importZeroOrderHeaders"
            :on-progress="importZeroOrderProgress"
            :on-success="importZeroOrderSuccess"
            :on-error="importZeroOrderError"
          >
            <el-button type="warning">0元订单导入</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <!-- <el-input v-model="pageData.syncOnlineOrderCode" style="width: 300px" placeholder="请输入线上订单号" /> -->
          <el-button type="primary" style="margin-left: 5px" @click="rewriteSAP">回传SAP</el-button>
          <el-checkbox style="margin-left: 10px" v-model="pageData.skipAlreadyRewrite">跳过已回传</el-checkbox>
          <el-checkbox style="margin-left: 10px" v-model="pageData.retryRewrite">重新回传（谨慎使用）</el-checkbox>
          <el-button type="info" style="margin-left: 5px" @click="cleanRewriteRecord">清除回传记录</el-button>
          <el-button type="warning" style="margin-left: 5px" @click="manualConfirm">手动JST确认</el-button>
          <el-button type="danger" style="margin-left: 5px" @click="batchDeleteZero">批量删除0元订单</el-button>
        </div>

        <div>
          <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle />
          </el-tooltip>
          <el-tooltip content="刷新当前页">
            <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
          </el-tooltip>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table :data="tableData" @row-dblclick="rowDbclick" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <!-- <el-table-column label="操作" width="80" align="center">
            <template #default="scope">
              <el-button type="primary" bg size="small" @click="rewriteSAP(scope.row)">回传SAP</el-button>
            </template>
          </el-table-column> -->
          <el-table-column prop="sceneType" width="70" label="场景" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.sceneType == 1" type="success">补发订单</el-tag>
              <el-tag v-if="scope.row.sceneType == 2" type="info">发票回传</el-tag>
              <el-tag v-if="scope.row.sceneType == 3" type="danger">换货订单</el-tag>
              <el-tag v-if="scope.row.sceneType == 4" type="danger">0元订单</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="onlineSaleOrderCode" width="200" label="线上单号" align="center" />
          <el-table-column prop="internalInvoiceId" width="90" label="发票序列号" align="center" />
          <el-table-column prop="jstShopName" width="200" label="店铺名称" align="center" />
          <el-table-column prop="remark" width="80" label="发票备注" align="center" />
          <el-table-column prop="invoiceType" width="90" label="发票类型" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.invoiceType == 1" type="success">蓝票</el-tag>
              <el-tag v-if="scope.row.invoiceType == 2" type="danger">红票</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="ifSpecialInvoice" width="90" label="专票/普票" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.ifSpecialInvoice == 0">普票</el-tag>
              <el-tag v-if="scope.row.ifSpecialInvoice == 1" type="success">专票</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="invoiceDate" width="110" label="发票日期" align="center" />
          <el-table-column prop="jstCreateTime" width="100" label="JST创建时间" align="center" />
          <el-table-column prop="reStatus" width="70" label="SAP状态" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.reStatus == 0" type="info">未反写</el-tag>
              <el-tag v-if="scope.row.reStatus == 1" type="info">传输中</el-tag>
              <el-tag v-if="scope.row.reStatus == 2" type="success">成功</el-tag>
              <el-tag v-if="scope.row.reStatus == 3" type="danger">失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="reCode" width="110" label="SAP销售单号" align="center" />
          <!-- <el-table-column prop="reErrorMsg" label="SAP反写错误信息" align="center" /> -->
          <el-table-column prop="reErrorMsg" width="200" label="异常信息" align="center">
            <template #default="scope">
              <div class="errorMsgdiv" @click="clickShowErrorMessage(scope.row)">{{ scope.row.reErrorMsg }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="reRequestTime" width="100" label="回传时间" align="center" />
          <el-table-column prop="outWarehouseOrderCode" width="100" label="出库单号" align="center" />
          <el-table-column prop="invoiceSn" width="200" label="发票流水号" align="center" />
          <el-table-column prop="createTime" width="100" label="创建时间" align="center" />
          <el-table-column prop="modifiedTime" width="100" label="修改时间" align="center" />
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.startPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog v-model="pageData.dialogErrorMessageVisible" title="异常信息" width="70%">
      <div class="error-log">{{ pageData.currentShowErrorMessage }}</div>
    </el-dialog>

    <!-- 发票详情 -->
    <el-dialog v-model="pageData.dialogDetPage" title="发票明细" width="70%">
      <div class="table-wrapper">
        <el-table :data="tableDetData">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="materialName" label="商品名称" align="center" />
          <el-table-column prop="internalInvoiceDetId" width="180" label="发票明细序列号" align="center" />
          <el-table-column prop="internalInvoiceId" width="100" label="发票序列号" align="center" />
          <el-table-column prop="qty" width="180" label="商品数量" align="center" />
          <el-table-column prop="materialCode" width="180" label="商品编码" align="center" />
          <el-table-column prop="taxNo" width="180" label="税号" align="center" />
          <el-table-column prop="price" width="100" label="含税金额" align="center" />
        </el-table>
      </div>
    </el-dialog>

    <!-- 出库场景详情 -->
    <el-dialog v-model="pageData.dialogOutwarehousePage" title="明细" width="70%">
      <el-card v-loading="loading" shadow="never">
        <div class="table-wrapper">
          <el-table :data="tableDetOutwarehouseData">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column prop="materialName" label="商品名称" align="center" />
            <el-table-column prop="shopName" width="180" label="店铺名称" align="center" />
            <el-table-column prop="sourceOrderCode2" width="180" label="线上订单号" align="center" />
            <el-table-column prop="alreadyDeliveredQty" width="180" label="已发数量" align="center" />
            <el-table-column prop="materialCode" width="180" label="商品编码" align="center" />
            <el-table-column prop="buyerPaidamount" width="180" label="出库单买家实付金额" align="center" />
            <el-table-column prop="realityDealPrice" width="180" label="商品实际成交金额" align="center" />
          </el-table>
        </div>
      </el-card>
    </el-dialog>

    <!-- 0元订单场景详情 -->
    <el-dialog v-model="pageData.dialogZeroPage" title="明细" width="70%">
      <el-card v-loading="loading" shadow="never">
        <div class="table-wrapper">
          <el-table :data="tableZeroDetData">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column prop="materialName" label="商品名称" align="center" />
            <el-table-column prop="onlineSaleOrderCode" width="180" label="线上订单号" align="center" />
            <el-table-column prop="qty" width="180" label="已发数量" align="center" />
            <el-table-column prop="materialCode" width="180" label="商品编码" align="center" />
            <el-table-column prop="price" width="180" label="商品实际成交金额" align="center" />
            <el-table-column prop="jstOutWarehouseOrderCode" width="180" label="聚水潭出库单号" align="center" />
          </el-table>
        </div>
      </el-card>
    </el-dialog>

    <!-- 同步发票对话框 -->
    <el-dialog v-model="pageData.dialogSyncInvoiceVisible" width="70%">
      <div>
        <el-form-item prop="reRequestTime" label="">
          <el-input
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 20 }"
            placeholder="订单号列表"
            v-model="pageData.onlineSaleOrderCodeList"
          />
        </el-form-item>

        <el-button type="primary" @click="syncInvoiceClick">根据线上单号同步发票</el-button>
        <el-divider />
        <el-form-item prop="syncStartDate" label="起始时间">
          <el-date-picker
            v-model="pageData.syncStartDate"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-button type="warning" @click="syncInvoiceByDateClick">根据起始时间同步发票</el-button>
        <br />
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.keywordDiv {
  // max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.errorMsgdiv {
  // max-width: 200px;
  color: red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.error-log {
  background-color: #333; /* 深灰背景 */
  color: #bada55; /* 亮绿色文字 */
  font-family: "Courier New", monospace; /* 等宽字体 */
  padding: 10px; /* 内边距 */
  border-radius: 5px; /* 边角圆滑 */
  border: 1px solid #666; /* 边框颜色稍浅 */
  white-space: pre-wrap; /* 保持换行和空格 */
  word-wrap: break-word; /* 长单词也可以断行 */
  // max-width: 600px; /* 最大宽度 */
  margin: 20px auto; /* 居中显示 */
}
</style>
